<template>
	<div id="reg-app">
		<div class="login-info">
			<p>注册会员</p>

			<ul>
				<li>
					<input id="regUserName" type="text" placeholder="手机号" />
				</li>
				<li>
					<input id="rePwd" type="password" placeholder="密码" />
				</li>
				<li>
					<input id="reRegPwd" type="password" placeholder="确认密码" />
				</li>
				<li>
					<button class="btn" @click="Reg">注册</button>
				</li>
			</ul>
			<p class="mg">
				<small @click="$router.push('/Login')">已有账号,立即登录</small>
				<small @click="$router.push('/ForgetPwd')">忘记密码</small>
			</p>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/components/common/_footer.vue"
	export default {
		data() {
			return {}
		},
		components: {
			Footer
		},
		beforeCreate: function() {
			{
				document.body.style.backgroundColor = "#f4f4f4";
			}
		},
		mounted: function() {
			document.querySelector("#menu").querySelectorAll("a")[3].classList.add("router-link-exact-active");

		},
		methods: {
			Reg: function() {
				var userName = document.getElementById("regUserName");
				if (userName.value.trim() == "") {
					userName.focus();
					return;
				}
				var pwd = document.getElementById("rePwd");
				if (pwd.value.trim() == "") {
					pwd.focus();
					return;
				}
				var reRegPwd = document.getElementById("reRegPwd");
				if (reRegPwd.value.trim() == "") {
					reRegPwd.focus();
					return;
				}
				if (reRegPwd.value.trim() !== pwd.value.trim()) {
					this.$layer.toast({
						icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
						content: '两次输入密码不一致!',
						time: 3000 // 自动消失时间 toast类型默认消失时间为2000毫秒
					});
					//reRegPwd.focus();
					return;
				}
				this.$http.post(config.ApiUrl + 'account/Register', {
					UserName: userName.value.trim(),
					PassWord: pwd.value.trim(),
					RegCode: '',
					RegSource: 60
				}, {
					emulateJSON: true
				}).then(function(res) {
					console.log(res.body.data);
					if (res.body.success == true) {
						//注册成功自动登录。
						this.$layer.loading('注册成功,请稍侯...');
						localStorage.setItem("memberName",  userName.value.trim());
						localStorage.setItem("memberPwd", pwd.value.trim());
						this.$router.push("/Member");

					} else {
						this.$layer.toast({
							icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
							content: res.body.info,
							time: 3000 // 自动消失时间 toast类型默认消失时间为2000毫秒
						});
					}
					//this.article = res.body.data;
				}, function(res) {
					console.log('失败')
				});
			}
		}
	}
</script>

<style scoped>
	#login-app {
		/* background-color: #; */
	}

	.login-info {
		display: block;
		margin: 2rem auto;
		background-color: white;
		width: 90vw;
		border-radius: .5rem;
	}

	.login-info p {
		text-align: center;
		font-size: 2rem;
		color: #777;
		padding-top: 1rem;
	}

	.login-info li:not(:last-child) {
		margin: 1rem;
		border-bottom: 1px solid #e3e3e3;
		padding: 1rem 0;
	}

	.login-info li input {
		font-size: 1.6rem;
		width: 100%;
	}

	.login-info li button {
		background-color: #FD482C;
		color: white;
		font-size: 1.8rem;
		text-align: center;
		display: block;
		width: 80vw;
		margin: 3rem auto;
		border: none;
		border-radius: 0;
		padding: .5rem 0;
		margin-bottom: 1rem;
	}

	.mg {
		padding-bottom: 1rem;
		display: flex;
		margin: 1rem;
	}

	.mg small:first-child {
		flex: 1;
		text-align: left;
	}

	.mg small:last-child {
		flex: 1;
		text-align: right;
	}
</style>
